iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
Modern Web

關於SASS/SCSS系列 第 23

[DAY23] SASS @use

  • 分享至 

  • xImage
  •  

前情提要

今天這個語法是@import的延伸,
叫做@use,
也是分門別類的好工具。


正文

|@use用法|
@use的用法跟@import其實很類似,
都可以把你密密麻麻的程式碼做分類,
分成不同的檔案,
最後再一次全部載入到all.sass裡面。
命名方法也是跟@import一樣,
在sass檔前面加「底線」。

|@import 跟 @use的差別|
重點來了,介紹import跟use的差別。
Import 就是把我參照的sass檔合併進來,
根據擺放的順序位置,
變數的宣告也要很小心,
因為通常不會在all.sass檔裡面撰寫內容,
它只起到一個統整的概念。
問題來了,
在不同的(底線)sass檔案當中,
會設置各式各樣不同的變數,
沒有放好位置或是交錯使用import的就很麻煩。

|@use的使用情況|
@use就是來解決這個問題的,
Use 的功用叫參照,
是當你有使用的時候可以把它拿出來,
不需要的時候就可以當它不存在
但是還是import被廣泛的使用
因為有一些Sass的編輯器不支援use的用法。


/images/emoticon/emoticon08.gif


上一篇
[DAY22] SASS @each
下一篇
[DAY24]SASS 畫星星|Transform屬性|z-index圖層
系列文
關於SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言